<template>
  <div class="scheme-banner-build">
    <div class="container">
      <Title
        v-slide-up
        title="建设内容"
        color="#0e0b31"
        size="16"
        bold="700"
        sub-title="Construction Content"
        sub-color="#878597"
        sub-size="14"
        left="27"
        block="#4580dd"
        block-width="2"
        block-pos="center"
      />
      <div class="build g g4 gap23">
        <div
          v-slide-plus
          v-for="(item, index) in data.list"
          :key="index"
          class="build-item"
        >
          <img :src="publicSrc(item.image)" />
          <div class="title line-1">{{ item.name }}</div>
          <div class="content line-3">{{ item.introduce }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: "",
        image: "",
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.scheme-banner-build {
  width: 100%;
  background-color: #fff;
  position: relative;
  .container {
    padding: 30px 0;
    .build {
      padding: 10px;
      .build-item {
        padding: 20px;
        height: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        border: 1px solid #e5e5e5;
        transition: all 0.3s;
        img {
          width: 56px;
          height: 56px;
          margin: 20px 0;
        }
        .title {
          font-size: 14px;
          font-weight: 700;
          color: #000;
          text-align: center;
        }
        .content {
          font-size: 14px;
          color: #808080;
          margin-top: 10px;
          text-align: center;
        }
        &:hover {
          background: linear-gradient(135deg, #fff 0%, #2a82e4 100%);
          box-shadow: 0px 10px 15px rgba(42, 130, 228, 0.25);
          animation: toRight 0.3s ease;
        }
      }
    }
  }
}
</style>
